<template>
    <div>
        <el-card class="box-card">
            <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
                <el-form-item>
                    <el-input v-model="queryData.clientName" placeholder="用户姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="queryData.date"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="query">查询</el-button>
                    <el-button size="small" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div style="height: 20px"></div>
        <div class="m-alert">
            <span class="el-icon-info"></span>
            <div>
                <div>非企业客户在客户线索中显示</div>
            </div>
        </div>
        <div style="height: 20px"></div>

        <!--table-->
        <div>
            <el-card class="box-card">
                <el-button icon="el-icon-plus" type="primary" @click="download">导出数据
                </el-button>
                <div style="height: 10px"/>
                <el-table @selection-change="tableRowChange" :data="tableData"
                          :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                    <el-table-column
                            prop="clientName"
                            label="用户姓名"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="clientPhone"
                            label="用户手机号"
                            width="320">
                    </el-table-column>
<!--                    <el-table-column
                            prop="prizesName"
                            label="获得奖品">
                    </el-table-column>-->
                    <el-table-column
                            prop="startTime"
                            label="注册时间">
                    </el-table-column>
                    <el-table-column
                            label="用户详情">
                        <template slot-scope="scope">
                            <el-button type="text" @click="xiangqing(scope.$index, scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes"
                               :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>
        </div>
        <div>
            <el-dialog title="详情" :visible.sync="views" width="30%" :close-on-click-modal="false">
                <el-form ref="form" :model="detailForm" label-position="left" label-width="80px">
                    <el-form-item label="用户姓名">
                        <el-input v-model="detailForm.clientName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="detailForm.clientPhone" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="获得奖品">
                        <el-input v-model="detailForm.prizesName" disabled></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="detailVisible = false">返回</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination"
import axios from "axios";

export default {
    name: "second",
    components: {
        Pagination
    },
    data() {
        return {
            queryData: {
                clientName: '',
                date: []
            },
            uptime: '',
            endtime: '',
            tableData: [],
            views: false,
            detailForm: {},
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            },
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },

        }
    },
    mounted() {
        this.queryDataHandle(1, 10);
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            let payload = {
                pageNum: page,
                pageSize: row,
                activityInstanceType: '大转盘'
            }
            let that = this
            that.$request("/api/clientActivity/selectClientActivity/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
        },
        //条件查询
        query() {
            if (this.queryData.date != 0){
                this.uptime = this.queryData.date[0],
                this.endtime = this.queryData.date[1]
            }
            var clientActivity = {
                clientName: this.queryData.clientName,
                activityInstanceType: '大转盘',
                uptime: this.uptime,
                endtime: this.endtime
            }
            let that = this
            that.$request("/api/clientActivity/selectClientActivity/1_0", clientActivity, "POST").then((data) => {
                that.tableData = data.rows
            })
        },
        resetQuery() {
            this.queryData = {}
        },
        xiangqing(index,row) {
                this.views = true
                this.detailForm = {...row}
        },
        download() {
            if (this.queryData.date.length != 0){
                this.uptime = this.queryData.date[0],
                this.endtime = this.queryData.date[1]
            }else {
                this.uptime = ''
                this.endtime = ''
            }
            var clientActivity = {
                uptime : this.uptime,
                endtime : this.endtime,
                clientName : this.queryData.clientName
            }
            debugger
            this.$requestFile("/api/clientActivity/exportTable1/1_0", clientActivity, "发放记录.xlsx")
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },
    }
}
</script>

<style scoped>
.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>
